<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card class="update-log main-module-log">
          <div class="main-module main-module2">
            <div class="main-module-left">
              <h3 class="main-module-num">
                <span>{{ host.offLineNum }}</span
                >/{{ host.totalNum }}
              </h3>
              <p class="main-module-text">监控主机</p>
            </div>
            <div class="main-module-right">
              <span class="module-right-icon module-right-icon2"></span>
            </div>
          </div>
          <div class="main-module-mark">
            <p @click="goToHost">更多<span class="module-more-icon"></span></p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card class="update-log main-module-log">
          <div class="main-module main-module1">
            <div class="main-module-left">
              <h3 class="main-module-num">
                <span>{{ process.offLineNum }}</span
                >/{{ process.totalNum }}
              </h3>
              <p class="main-module-text">监控进程</p>
            </div>
            <div class="main-module-right">
              <span class="module-right-icon module-right-icon1"></span>
            </div>
          </div>
          <div class="main-module-mark">
            <p @click="goToProcess">
              更多<span class="module-more-icon"></span>
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card class="update-log main-module-log">
          <div class="main-module main-module3">
            <div class="main-module-left">
              <h3 class="main-module-num">
                <span>{{ port.offLineNum }}</span
                >/{{ port.totalNum }}
              </h3>
              <p class="main-module-text">监控端口</p>
            </div>
            <div class="main-module-right">
              <span class="module-right-icon module-right-icon3"></span>
            </div>
          </div>
          <div class="main-module-mark">
            <p @click="goToPort">更多<span class="module-more-icon"></span></p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card class="update-log main-module-log">
          <div class="main-module main-module4">
            <div class="main-module-left">
              <h3 class="main-module-num">
                <span>{{ dataSource.offLineNum }}</span
                >/{{ dataSource.totalNum }}
              </h3>
              <p class="main-module-text">数据源</p>
            </div>
            <div class="main-module-right">
              <span class="module-right-icon module-right-icon4"></span>
            </div>
          </div>
          <div class="main-module-mark">
            <p @click="goToSource">
              更多<span class="module-more-icon"></span>
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <div class="main-content">
          <p class="main-content-rules">
            主机平均上报频率(秒)：<span>120</span>
          </p>
          <p class="main-content-status">
            当前所有主机最近5分钟状态，下行传输速率：最高<span
              class="status-zuigao"
              ><i></i>{{ infor.fiveDownHighest }}</span
            >
            平均<span class="status-pingjun"
              ><i></i>{{ infor.fiveDownAvg }}</span
            >
            最低<span class="status-zuidi"
              ><i></i>{{ infor.fiveDownLowest }}</span
            >
            上行传输速率：最高<span class="status-zuigao"
              ><i></i>{{ infor.fiveUpHighest }}</span
            >
            平均<span class="status-pingjun"><i></i>{{ infor.fiveUpAvg }}</span>
            最低<span class="status-zuidi"
              ><i></i>{{ infor.fiveUpLowest }}</span
            >
            <br />
            当前所有主机最近5分钟状态，5分钟系统负载：最高<span
              class="status-zuigao"
              ><i></i>{{ infor.fiveLoadHighest || "0" }}</span
            >
            平均<span class="status-pingjun"
              ><i></i>{{ infor.fiveLoadAvg || "0" }}</span
            >
            最低<span class="status-zuidi"
              ><i></i>{{ infor.fiveLoadLowest || "0" }}</span
            >
            15分钟系统负载：最高<span class="status-zuigao"
              ><i></i>{{ infor.fifteenLoadHighest || "0" }}</span
            >
            平均<span class="status-pingjun"
              ><i></i>{{ infor.fifteenLoadAvg || "0" }}</span
            >
            最低<span class="status-zuidi"
              ><i></i>{{ infor.fifteenLoadLowest || "0" }}</span
            >
          </p>
        </div>
      </el-col>
      <el-col :sm="24" :lg="24" class="card_block">
        <div class="card_percentage">
          <p class="percentage_item percentage_item_red">
            {{ infor.memHighestPercentage }}%<span>内存%最高</span>
          </p>
          <p class="percentage_item percentage_item_yellow">
            {{ infor.memAvgPercentage }}%<span>内存%平均</span>
          </p>
          <p class="percentage_item percentage_item_green">
            {{ infor.memLowestPercentage }}%<span>内存%最低</span>
          </p>
        </div>
        <div class="card_total">
          内存总和：<span>{{ infor.memTotal }}G</span><br />
          CPU核数总和：<span>{{ infor.cpuCoresTotal }}</span
          ><br />
          磁盘容量总和：<span>{{ infor.diskCapacityTotal }}</span>
        </div>
        <div class="card_percentage">
          <p class="percentage_item percentage_item_red">
            {{ infor.cpuHighestPercentage }}%<span>cpu%最高</span>
          </p>
          <p class="percentage_item percentage_item_yellow">
            {{ infor.cpuAvgPercentage }}%<span>cpu%平均</span>
          </p>
          <p class="percentage_item percentage_item_green">
            {{ infor.cpuLowestPercentage }}%<span>cpu%最低</span>
          </p>
        </div>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div id="commandstats" ref="commandstats" style="height: 100%" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="networkload" style="height: 500px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getData } from "@/api/index";
import * as echarts from "echarts";
import "echarts-liquidfill";

const router = useRouter();
const host = ref({
  offLineNum: 2,
  totalNum: 33,
});
const process = ref({
  offLineNum: 2,
  totalNum: 33,
});
const port = ref({
  offLineNum: 2,
  totalNum: 33,
});
const dataSource = ref({
  offLineNum: 2,
  totalNum: 33,
});
const infor = ref({
  fiveDownHighest: "10MB/s",
  fiveDownAvg: "5MB/s",
  fiveDownLowest: "2MB/s",
  fiveUpHighest: "10MB/s",
  fiveUpAvg: "5MB/s",
  fiveUpLowest: "2MB/s",
  fiveLoadHighest: "10MB/s",
  fiveLoadAvg: "5MB/s",
  fiveLoadLowest: "2MB/s",
  fifteenLoadHighest: "10MB/s",
  fifteenLoadAvg: "5MB/s",
  fifteenLoadLowest: "2MB/s",
  memHighestPercentage: 17,
  memAvgPercentage: 13,
  memLowestPercentage: 9,
  memTotal: 32,
  cpuCoresTotal: 12,
  diskCapacityTotal: 567,
  cpuHighestPercentage: 17,
  cpuAvgPercentage: 13,
  cpuLowestPercentage: 9,
});

const commandstats = ref(null);
const networkload = ref(null);
const chart = ref(null);
const { proxy } = getCurrentInstance();

function getList() {
  proxy.$modal.loading("正在加载");
  // getData().then((response) => {
  proxy.$modal.closeLoading();
  // host.value = response.data.host;
  // process.value = response.data.process;
  // port.value = response.data.port;
  // dataSource.value = response.data.dataSource;
  // infor.value = response.data.info;
  let total =
    parseInt(host.value.totalNum) +
    parseInt(process.value.totalNum) +
    parseInt(port.value.totalNum) +
    parseInt(dataSource.value.totalNum);
  const commandstatsIntance = echarts.init(commandstats.value);
  commandstatsIntance.setOption({
    title: {
      text: "监控资源总数量（" + total + "）",
      left: "center",
      top: 10,
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      bottom: 10,
      left: "center",
    },
    series: [
      {
        name: "统计",
        type: "pie",
        radius: "60%",
        center: ["50%", "50%"],
        data: [
          {
            value: host.value.totalNum,
            name: "监控主机",
            itemStyle: {
              color: "#4da8e8",
            },
          },
          {
            value: process.value.totalNum,
            name: "监控进程",
            itemStyle: {
              color: "#d81b60",
            },
          },
          {
            value: port.value.totalNum,
            name: "监控端口",
            itemStyle: {
              color: "#5ccbc4",
            },
          },
          {
            value: dataSource.value.totalNum,
            name: "数据源",
            itemStyle: {
              color: "#ec8a18",
            },
          },
        ],
      },
    ],
  });
  const networkloadIntance = echarts.init(networkload.value);
  networkloadIntance.setOption({
    title: {
      text: "网络负载统计",
      left: "center",
      top: 10,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "统计",
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  });

  //水滴球
  // const chartIntance = echarts.init(chart.value);
  // chartIntance.setOption({
  //   series: [{
  //     type: 'liquidfill',
  //     data: [{
  //
  //       value: 300,
  //       name: "监控主机",
  //       itemStyle: {
  //         color: "#4da8e8" }
  //     }]
  //   }]
  // })
  // });
}

//监控主机
function goToHost() {
  router.push("/system/host");
}

//监控进程
function goToProcess() {
  router.push("/system/process");
}

//监控端口
function goToPort() {
  router.push("/system/port");
}

//数据源
function goToSource() {
  router.push("/system/source");
}
nextTick(() => {
  getList();
});
</script>

<style>
.main-module-log {
  position: relative;
}
.main-module-log .el-card__body {
  padding: 30px 20px 50px !important;
}
.main-module {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
  padding-bottom: 30px;
}
.main-module-log p,
.main-module-log h3 {
  padding: 0;
  margin: 0;
}
.main-module-left {
}
.main-module-num {
  font-size: 32px;
  font-weight: normal;
  line-height: 40px;
}
.main-module1 .main-module-num {
  color: #d81b60;
}
.main-module2 .main-module-num {
  color: #4da8e8;
}
.main-module3 .main-module-num {
  color: #5ccbc4;
}
.main-module4 .main-module-num {
  color: #ec8a18;
}
.main-module-num span {
  color: #999;
}
.main-module-text {
  font-size: 18px;
  line-height: 32px;
}
.main-module-right {
}
.module-right-icon {
  width: 52px;
  height: 52px;
  display: inline-block;
}
.module-right-icon1 {
  background: url("../assets/images/index_icon1.png") no-repeat;
  background-size: contain;
}
.module-right-icon2 {
  background: url("../assets/images/index_icon2.png") no-repeat;
  background-size: contain;
}
.module-right-icon3 {
  background: url("../assets/images/index_icon3.png") no-repeat;
  background-size: contain;
}
.module-right-icon4 {
  background: url("../assets/images/index_icon4.png") no-repeat;
  background-size: contain;
}
.main-module-mark {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  border-top: 1px solid #ebedf1;
  cursor: pointer;
}
.main-module-mark p {
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-more-icon {
  background: url("../assets/images/jiantou.png") no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  display: inline-block;
}
.main-content {
  width: 100%;
  font-size: 15px;
  line-height: 30px;
  color: #000;
  padding: 20px 0 0;
}
.main-content p {
  margin: 0;
  padding: 0;
}
.main-content span {
  padding: 2px 4px;
  margin-right: 2px;
}
.main-content-rules span {
  background: #409eff;
  color: #fff;
  font-size: 13px;
}
.main-content-rules span.main-content-warning {
  background: #d81b60;
}
.main-content-status i {
  width: 0;
  height: 0;
  margin-right: 3px;
  vertical-align: middle;
  display: inline-block;
}
.status-zuigao {
  color: #d81b60;
}
.status-zuigao i {
  border-top: 5px solid #d81b60;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.status-pingjun {
  color: #f4c512;
}
.status-pingjun i {
  border-right: 5px solid #f4c512;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.status-zuidi {
  color: #55d327;
}
.status-zuidi i {
  border-bottom: 5px solid #55d327;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.card_block {
  display: flex !important;
  align-items: center;
  margin: 30px 0 70px;
}
.card_total {
  width: 20%;
  font-size: 15px;
  line-height: 30px;
  padding-top: 20px;
  padding-left: 35px;
  font-weight: bold;
}
.card_total span {
  color: #d81b60;
}
.card_percentage {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.percentage_item {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  font-size: 26px;
  font-weight: bold;
  margin: 0;
}
.percentage_item span {
  display: block;
  font-size: 14px;
  line-height: 50px;
  color: #333;
}
.percentage_item_red {
  color: #d81b60;
  border: 12px solid #d81b60;
}
.percentage_item_yellow {
  color: #f4c512;
  border: 12px solid #f4c512;
}
.percentage_item_green {
  color: #55d327;
  border: 12px solid #55d327;
}
</style>

